"use client";

import {
    DateField,
    DeleteButton,
    EditButton,
    List,
    ShowButton,
    useTable,
} from "@refinedev/antd";
import { type BaseRecord } from "@refinedev/core";
import { Space, Table, Tag } from "antd";

// 分类映射
const categoryMap: Record<string, string> = {
    electronics: "电子产品",
    clothing: "服装",
    food: "食品",
    books: "图书",
};

export default function ProductList() {
    const { tableProps } = useTable({
        syncWithLocation: true,
    });

    return (
        <List>
            <Table {...tableProps} rowKey="id">
                <Table.Column dataIndex="id" title="ID" />
                <Table.Column dataIndex="name" title="商品名称" />
                <Table.Column
                    dataIndex="price"
                    title="价格"
                    render={(value) => `¥${value}`}
                />
                <Table.Column dataIndex="stock" title="库存" />
                <Table.Column
                    dataIndex="category"
                    title="分类"
                    render={(value) => categoryMap[value] || value}
                />
                <Table.Column
                    dataIndex="status"
                    title="状态"
                    render={(value) => (
                        <Tag color={value === "active" ? "green" : "red"}>
                            {value === "active" ? "上架" : "下架"}
                        </Tag>
                    )}
                />
                <Table.Column
                    dataIndex="createdAt"
                    title="创建时间"
                    render={(value) => <DateField value={value} />}
                />
                <Table.Column
                    title="操作"
                    dataIndex="actions"
                    render={(_, record: BaseRecord) => (
                        <Space>
                            <EditButton hideText size="small" recordItemId={record.id} />
                            <ShowButton hideText size="small" recordItemId={record.id} />
                            <DeleteButton hideText size="small" recordItemId={record.id} />
                        </Space>
                    )}
                />
            </Table>
        </List>
    );
}

